<template>
  <div>
    <div class="header-wrapper">
      <div class="header" ref="header" :style="headerStyle" v-show="!bannerBack">
        <router-link to="./" tag="div">
          <span class="iconfont icon-back">&#xe647;</span>
        </router-link>
        <p v-if="title">{{title}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  name: "DetailHeader",
  data() {
    return {
      headerStyle: {
        opacity: 0
      },
      bannerBack: true
    };
  },
  methods: {
    handleScroll() {
      var scrollTop =
        Number.parseInt(document.documentElement.scrollTop) ||
        Number.parseInt(document.body.scrollTop);
      scrollTop ? (this.bannerBack = false) : (this.bannerBack = true);
      this.showBannerBack(this.bannerBack);
      if (scrollTop < 257) {
        var opacity = scrollTop / 257;
      } else {
        opacity = 1;
      }
      this.headerStyle = {
        opacity
      };
    },
    ...mapMutations(["showBannerBack"])
  },
  props: {
    bannerData: {},
    title: String
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/variables'

.header-wrapper
  position: fixed
  left: 0
  top: 0
  right: 0
  z-index: 999
  .header
    width: 100%
    text-align: center
    height: $headerHeight
    line-height: $headerHeight
    font-size: 0.32rem
    position: relative
    background: $bgColor
    color: white
    .icon-back
      font-size: 0.42rem
      position: absolute
      left: 0
      top: 0
      width: 0.8rem
      height: 0.88rem
      display: block
</style>